<template>
    <div class="store-products">
        <product-filtering-bar @change="handleChangeFiltering"/>
        <product-list :store-id="id" :collections="collections" :sort="sort"/>
    </div>
</template>

<script>
  import _ from "lodash"
  import ProductList from "@/components/product/ProductList"
  import ProductFilteringBar from "@/components/product/ProductFilteringBar"

  export default {
    name: "StoreProducts",
    components: { ProductFilteringBar, ProductList },
    props: {
      id: String,
      collections: String,
    },
    data() {
      return {
        sort: undefined,
      }
    },
    methods: {
      handleChangeFiltering(filtering) {
        const { sort } = filtering
        if (sort) {
          const sorts = []
          if (_.has(sort, "price")) {
            sorts.push(`price:${_.get(sort, "price")}`)
          }
          if (_.has(sort, "totalSales")) {
            sorts.push(`total_sales:${_.get(sort, "totalSales")}`)
          }
          this.sort = _.join(sorts, ",")
        } else {
          this.sort = undefined
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
    .store-products {

    }
</style>
